import { Button, Form, Input } from 'antd'
import { useNavigate } from 'react-router-dom'

import { useAuth } from '@/hooks/useAuth'

type FieldType = {
  email?: string
  code?: string
}

const Login = () => {
  const { login } = useAuth()
  const navigate = useNavigate()

  const onFinish = (values: FieldType) => {
    console.log('Success:', values)
  }

  const handleLogin = () => {
    login()
    navigate('/home')
  }

  return (
    <div className="flex h-full items-center justify-center">
      <Form
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="Email"
          name="email"
          rules={[{ required: true, message: 'Please input your Email!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="Code"
          name="code"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item className="">
          <Button type="primary" htmlType="submit" block>
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
